absolute + top/left + tranform

利用top/left將子元素的左上角對齊中間，再利用transform平移元素自身50%的寬高達到置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  position:relative;
}
.child
{
   border:1px solid black;
   height:50px;
   width:50px;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%)
}

Flex

將父元素設定為Flex，同時使用justify-content讓主軸置中，再使用align-items讓次軸置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  display:flex;
  justify-content: center;
  align-items: center;
}

relative + calc

利用calc計算出置中，父元素(100% - 自身高) / 2 = 垂直置中。
margin:auto 水平置中。

.father
{
  border:1px solid black;
  height:100px;
  width:100px;
  

}
.child
{
   border:1px solid black;
   height:30px;
   width:30px;
   position:relative; 
   top : calc((100% - 30px) / 2);
   margin:auto;
}